<template>
  <div class="rider">

		<daya-clone-navbar :prop_clone_navbar="clone_navbar" :prop_is_ipx="is_ipx"/>

    <header>
      <div class="nav-item">
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/logo.jpg" mode="scaleToFill" />
        <div class="content">
          <div class="name" style="font-weight: 600">xxxxxxxxx优惠券</div>
          <div class="desc">xxxxxxxxxx领取优惠券啦</div>
        </div>
      </div>
    </header>
    <div class="rider-list">
      <div class="list-item" @click="toChatDetail">
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/logo.jpg" mode="scaleToFill" />
        <div class="content">
          <div class="content-top">
            <div class="name">小蜜蜂社区服务站</div>
            <div class="time">12:45</div>
          </div>
          <div class="content-bottom">
            <div class="address">重庆市</div>
            <div class="length">1.8km</div>
          </div>
        </div>
      </div>
      <div class="list-item" @click="toChatDetail">
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/logo.jpg" mode="scaleToFill" />
        <div class="content">
          <div class="content-top">
            <div class="name">小蜜蜂便利店</div>
            <div class="time">12:45</div>
          </div>
          <div class="content-bottom">
            <div class="address">重庆市</div>
            <div class="length">1.8km</div>
          </div>
        </div>
      </div>
      <div class="list-item" @click="toChatDetail">
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/logo.jpg" mode="scaleToFill" />
        <div class="content">
          <div class="content-top">
            <div class="name">xxx便利店</div>
            <div class="time">12:45</div>
          </div>
          <div class="content-bottom">
            <div class="address">重庆市</div>
            <div class="length">1.8km</div>
            <div class="no-read">1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var app = getApp()
export default {
  components: {},
  data() {
    return {
      list: []
    }
  },
  computed: {},
  methods: {
    toChatDetail() {
      uni.navigateTo({ url: '/ymq_canyino2o/pages/chat/chatDetail/index' })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
		app.globalData.setNavigationBarColor(this);
		this.appPageOnLoad(app);
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped>
header {
  width: 100vw;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #fff;
}
header image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 40rpx;
}
header .nav-item {
  display: flex;
  align-items: center;
}
.rider-list {
  width: 100%;
  margin: 10rpx auto;
  display: flex;
  flex-direction: column;
}
.rider-list image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.rider-list .list-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 20rpx;
  margin: 10rpx 0;
  background: #fff;
  border-radius: 20rpx;
}
.rider-list .list-item .content {
  width: calc(100% - 80rpx);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rider-list .list-item .content .content-top,
.rider-list .list-item .content .content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.rider-list .list-item .content .content-top .name {
  border: 1px solid red;
  border-radius: 50rpx;
  padding: 4rpx 10rpx;
  color: red;
}
.rider-list .list-item .content .content-bottom .length {
  border: 1px solid red;
  border-radius: 10rpx;
  padding: 4rpx 10rpx;
  margin-left: auto;
  position: absolute;
  bottom: 0;
  right: 80rpx;
  height: 50rpx;
}
.rider-list .list-item .content .content-bottom .no-read {
  width: 40rpx;
  height: 40rpx;
  color: #fff;
  background: red;
  border-radius: 50%;
  font-size: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
